<template>
	<view class="page-main">
		<x-navbar :title="'测试'" autoBack @titleClick="onClickTitle" />
		<view class="entry">
			<view class="entry-con">
				<view class="entry-con-item">
					<view class="btn" @click="startRecording">开始录音</view>
					<view class="btn" @click="stopRecording">结束录音</view>
				</view>
			</view>
		</view>
		<!-- 录音播放 -->
		<audio v-if="audioUrl" :src="audioUrl" controls></audio>
		<text v-if="recordingTime">录音时长：{{ recordingTime }}秒</text>
		<!-- 显示兼容性提示 -->
		<view v-if="!isSupported" class="error">您的浏览器不支持录音功能，请使用最新版Chrome、Edge或Firefox</view>
	</view>
</template>

<script>
//此页功能  录音 & 播放
import { mapGetters, mapActions } from 'vuex';
export default {
	data() {
		return {
			isRecording: false,
			mediaRecorder: null,
			audioChunks: [],
			audioUrl: '',
			recordingTime: 0,
			timer: null,
			isSupported: true
		};
	},
	computed: {},
	async onLoad() {
		// 检查浏览器兼容性
		this.isSupported = navigator.mediaDevices && MediaRecorder && MediaRecorder.isTypeSupported('audio/webm');
		console.log('是否支持录音: ', this.isSupported);
		const res = await getApp().checkMicrophonePermission();
		console.log('权限: ', res);
	},
	methods: {
		async startRecording() {
			if (!this.isSupported) return;
			try {
				// 1. 获取麦克风权限
				const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
				// 2. 创建录音实例
				this.mediaRecorder = new MediaRecorder(stream);
				this.audioChunks = [];
				// 3. 收集录音数据
				this.mediaRecorder.ondataavailable = (event) => {
					this.audioChunks.push(event.data);
				};
				// 4. 录音结束处理
				this.mediaRecorder.onstop = () => {
					// 生成Blob和播放URL
					const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
					this.audioUrl = URL.createObjectURL(audioBlob);
					// 关闭麦克风
					stream.getTracks().forEach((track) => track.stop());
				};
				// 5. 开始录音
				this.mediaRecorder.start();
				this.isRecording = true;
				// 计时器
				this.recordingTime = 0;
				this.timer = setInterval(() => {
					this.recordingTime++;
				}, 1000);
			} catch (error) {
				console.error('录音失败:', error);
				uni.showToast({ title: '无法访问麦克风', icon: 'none' });
			}
		},
		stopRecording() {
			if (!this.isRecording) return;
			clearInterval(this.timer);
			this.mediaRecorder.stop();
			this.isRecording = false;
			console.log('结束录音');
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f5fa;
}
.page-main {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding-top: 32rpx;
	.slogan {
		position: fixed;
		bottom: 40rpx;
		color: #393c40;
		width: 100%;
		text-align: center;
		z-index: 9999;
		&.pl {
			font-size: 24rpx;
		}
	}
	.entry {
		padding: 0 30rpx;
		.entry-con {
			border-radius: 24rpx;
			background-color: #ffffff;
			box-shadow: 4px 4px 16px 0px rgba(0, 28, 83, 0.05);
			.entry-con-item {
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.btn {
					width: 100px;
					height: 60px;
					font-size: 20px;
					line-height: 60px;
					text-align: center;
					background-color: skyblue;
					border-radius: 12px;
				}
			}
			.enter-space {
				height: 1rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background-color: lightgray;
				opacity: 0.5;
			}
		}
	}
}
</style>
